<template>
  <SplitPanel p-5>
    <template #left-content>
      <div class="titleBox">
        <div class="title">部门组织架构</div>
        <div class="btn">批量导入</div>
      </div>

      <div class="mySearch">
        <a-input-search
          v-model:value="value"
          placeholder="输入名称搜索"
          enter-button="搜索"
          @search="onSearch"
        />
      </div>
      <a-directory-tree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        multiple
        :tree-data="treeData"
      ></a-directory-tree>
    </template>
    <template #right-content>
      <DynamicTable
        bordered
        :data-request="loadData"
        :columns="columns"
        row-key="id"
        @resize-column="handleResizeColumn"
        :scroll="{
          y: 'calc(100vh - 360px)',
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-switch
              v-model:checked="record.status"
              :checkedValue="1"
              :unCheckedValue="0"
              checkedChildren="启用"
              unCheckedChildren="禁用"
              width="60"
              :disabled="record.roleName === '超级管理员'"
              @click="onDisable(record)"
            />
          </template>
        </template>
        <template #toolbar>
          <a-button type="primary" @click="openUserModal({})"> 新增 </a-button>
        </template>
      </DynamicTable>
    </template>
  </SplitPanel>
</template>
<script setup lang="ts">
  import { Modal, message } from 'ant-design-vue';
  import { baseColumns, type TableListItem } from './columns';
  import type { TreeProps } from 'ant-design-vue';
  import { ref } from 'vue';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import { useFormModal } from '@/hooks/useModal/index';
  const value = ref<string>('');
  const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    console.log('or use this.value', value.value);
  };
  const [showModal] = useFormModal();

  const [DynamicTable, dynamicTableInstance] = useTable();
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 330,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '详情',
          onClick: () => openUserModal(record),
        },
        {
          label: '编辑',
          onClick: () => openUserModal(record),
        },
        {
          label: '更换账号',
          onClick: () => openUserModal(record),
        },
        {
          label: '重置密码',
          onClick: () => openResetPwdModal(record),
        },
        {
          ifShow: record.roleName !== '总经理',
          label: '删除',
          onClick: () => deleteUser(record),
        },
        {
          ifShow: record.roleName == '总经理',
          label: '管理员移交',
          onClick: () => deleteUser(record),
        },
      ],
    },
  ];

  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '总经理',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '2',
          userName: '李四',
          userLogin: '15588882525',
          sex: 2,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 0,
        },
        {
          id: '3',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '4',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '5',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '6',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '7',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '8',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '9',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
        {
          id: '10',
          userName: '张三',
          userLogin: '15588882525',
          sex: 1,
          deptName: '正浩检测',
          roleName: '产品设计',
          roleType: '普通员工',
          status: 1,
        },
      ],
      searchCount: true,
      size: 10,
      total: 123,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const handleResizeColumn = (w, col) => {
    col.width = w;
  };

  // 企业状态开关变化   1.启用  2.禁用
  const onDisable = async (row: any) => {};

  /**
   * @description 打开用户弹窗
   */
  const openUserModal = async (record: Partial<TableListItem> = {}) => {};

  /**
   * @description 删除用户
   */
  const deleteUser = (record: Partial<TableListItem> = {}) => {};

  /**
   * @description 重置密码
   */
  const openResetPwdModal = async (record: Partial<TableListItem> = {}) => {};

  const expandedKeys = ref<string[]>(['0']);
  const selectedKeys = ref<string[]>(['1']);
  const treeData: TreeProps['treeData'] = [
    {
      title: '正浩检测',
      key: '0',
      children: [
        {
          title: '技术中心一二...',
          key: '1',
          isLeaf: true,
        },
        {
          title: '技术中心二二...',
          key: '2',
          isLeaf: true,
        },
      ],
    },
  ];
</script>
<style scoped lang="less">
  .mySearch {
    padding: 20px 20px 20px 10px;
  }
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 0 10px;

    .title {
      font-size: 16px;
    }
    .btn {
      font-size: 12px;
    }
  }
</style>
